<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useHospitalDetailStore } from '@/store/modules/hospital';

const $route = useRoute();
const $router = useRouter();
// 获取仓库对象
const detailStore = useHospitalDetailStore();

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const changeActive = (path: string) => {
  $router.push({
    path,
    query: {
      hoscode: $route.query?.hoscode,
    },
  });
};
onMounted(() => {
  const hoscode = $route.query?.hoscode;
  detailStore.getHospitalDetailAction(hoscode as string);
  // 医院科室的数据
  detailStore.getHospitalDepartmentAction(hoscode as string);
});
</script>
<template>
  <div class="hospital">
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
      <el-breadcrumb-item>promotion list</el-breadcrumb-item>
      <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-container>
      <el-aside width="150px">
        <!-- 左：导航 -->
        <el-menu
          :default-active="$route.path"
          router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          style="border: none"
        >
          <el-menu-item index="/hospital/register" @click="changeActive('/hospital/register')">
            <el-icon><Calendar /></el-icon>
            <span>预约挂号</span>
          </el-menu-item>
          <el-menu-item index="/hospital/detail" @click="changeActive('/hospital/detail')">
            <el-icon><Document /></el-icon>
            <span>医院详情</span>
          </el-menu-item>
          <el-menu-item index="/hospital/notice" @click="changeActive('/hospital/notice')">
            <el-icon><Bell /></el-icon>
            <span>预约须知</span>
          </el-menu-item>
          <el-menu-item index="/hospital/close" @click="changeActive('/hospital/close')">
            <el-icon><SwitchButton /></el-icon>
            <span>停诊信息</span>
          </el-menu-item>
          <el-menu-item index="/hospital/search" @click="changeActive('/hospital/search')">
            <el-icon><Search /></el-icon>
            <span>查询/取消</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 右：内容展示 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang="scss">
.hospital {
  padding: 15px;
}
</style>
